<script setup lang="ts">
import { ref, toRefs } from 'vue'

const user = ref({
  name: 'zs',
  age: 18,
})

// 解构出来的 name 和 age 为 ref 响应式对象
let { name, age } = toRefs(user.value)

const btn = () => {
  // ref 对象修改值需要 xxx.value
  age.value += 1
}
</script>

<template>
  <h1>App-根组件</h1>
  <h2>{{ user }}</h2>
  <h3>name：{{ name }}</h3>
  <h3>age：{{ age }}</h3>
  <button @click="btn">点击加1</button>
  <button @click="age += 1">点击加1</button>
</template>
